<script setup lang="ts">
import { ref } from 'vue';
import ChatInfo from './components/im-chat/im-chat-info/chat-info.vue';
import type { MessageItem } from './components/im-chat/im-type/im-message-item';
import { MessageType } from './components/im-chat/im-type/im-message-type';

const chatItems = ref<MessageItem[]>([
  {
    id: 1,
    friendId: '1',
    isMy: true,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,
    type: MessageType.text,
    content: '你好,这是我回复你的消息，请你看看样式是否正确',
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '张三'
  },
  {
    id: 2,
    friendId: '2',
    isMy: false,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,
    type: MessageType.text,
    content: '你好,这是我回复你的消息，请你看看样式是否正确',
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '李四'
  },
  {
    id: 3,
    friendId: '3',
    isMy: true,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,
    type: MessageType.text,
    content: '你好,这是我回复你的消息，请你看看样式是否正确',
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '王五'
  },
  {
    id: 4,
    friendId: '4',
    isMy: false,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,
    type: MessageType.text,
    content: '你好,这是我回复你的消息，请你看看样式是否正确',
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '赵六'
  },
  {
    id: 5,
    friendId: '5',
    isMy: true,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,
    type: MessageType.text,
    content: '你好,这是我回复你的消息，请你看看样式是否正确',
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '孙七'
  },
  {
    id: 6,
    friendId: '6',
    isMy: false,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,
    type: MessageType.text,
    content: '你好,这是我回复你的消息，请你看看样式是否正确',
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '周八'
  }

])
const chatStatue = ref('open')
const chatStatusContent = ref('正在聊天')
// 发送消息
const handleSendMessage = (content: string) => {
  let newChatItem: MessageItem = {
    id: chatItems.value.length + 1,
    friendId: '1',
    isMy: true,
    showTime: true,
    time: '2021-01-01 12:00:00',
    timestamp: 1614556800,  
    type: MessageType.text,
    content: content,
    headUrl: 'https://img1.baidu.com/it/u=3598104138,3632108415&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    sendStatus: 'success',
    nickname: '张三'
  }
  chatItems.value.push(newChatItem)
  console.log('app发送消息',content);
}
// 选取文件
const handleFileSelect = (files: FileList) => {
  console.log('app选取文件',files);
}

// 头像点击事件
const avatarClick = (id: number, isMy: boolean) => {
  console.log('app头像点击事件',id,isMy)
}
</script>

<template>
 <div>
  <!-- 聊天信息 -->
  <chat-info 
  :chatStatue="chatStatue" 
  :chatStatusContent="chatStatusContent" 
  :chatItems="chatItems"
  :handleSendMessage="handleSendMessage" 
  :handleFileSelect="handleFileSelect" 
  :avatarClick="avatarClick"
  />
 </div>
</template>

<style scoped>

</style>
